<template>
  <div>
    <div class="page-title">文章池</div>
    <v-data-table
        :headers="columns"
        :items="dataList"
        :page.sync="page"
        :items-per-page="pageSize"
        hide-default-footer
        class="elevation-1"
    >
      <template v-slot:item.title="{ item }">
        <a :href="item.source_url" target="_blank">{{item.title}}</a>
      </template>
      <template v-slot:item.actions="{ item }">
        <div class="table-actions">
          <v-btn class="mr-2" color="primary" dark small @click="handlePublish(item.id)">
            <v-icon dark left>mdi-pencil</v-icon>发布
          </v-btn>
        </div>
      </template>
    </v-data-table>
    <pagination
        :page="page"
        :page-size="pageSize"
        :total="total"
        @change="handlePaginationChange"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class AdminArticle extends Vue {
  protected columns: TypeBase.DataTableColumn[] = [];
  protected dataList: TypeArticle.PoolItem[] = [];
  protected page: number = 1;
  protected pageSize: number = 15;
  protected total: number = 0;
  protected created(): void {
    this.columns = [
      {text: 'ID', value: 'id'},
      {text: '标题', value: 'title'},
      {text: '来源', value: 'source_text'},
      {text: '创建时间', value: 'created_at'},
      {text: '更新时间', value: 'updated_at'},
      {text: '操作', value: 'actions', sortable: false },
    ];
    this.getArticlePool();
  }
  protected async getArticlePool(): Promise<void> {
    const params: TypeBase.PaginationParam = {
      page: this.page,
      page_size: this.pageSize,
    };
    const { data: {list, total} } = await this.$api.admin.articlePool<
        TypeBase.PaginationResult<TypeArticle.PoolItem[]>
        >(params);
    this.dataList = list;
    this.total = total;
  }
  protected handlePaginationChange(page: number, pageSize: number): void {
    this.page = page;
    this.pageSize = pageSize;
    this.getArticlePool();
  }
  protected handlePublish(id: number): void {
    this.$router.push({
      name: 'AdminAddArticle',
      query: {pool_id: String(id)},
    });
  }
  protected initPage(): void {
    this.page = 1;
  }
}
</script>

<style lang="scss" scoped>

</style>
